﻿<%@ Page Title="gpsinfo" Language="C#" MasterPageFile="~/EasyUI.master" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="lcgps.Web.gpsinfo.List" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=6a5e0746feee514e8bb7b3f468a626d1">
    </script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <%--<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>--%>
    <style type="text/css">
        #mymap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>

    <script type="text/javascript">
        var ptc;
        var pth;
        var pn;
        var map;
        var pid = "";
        var pcid = "";
        var mid = "";
        var timeid;
        var car = new BMap.Icon('../images/car.png', new BMap.Size(16, 16), { anchor: new BMap.Size(8, 16) });
        var home = new BMap.Icon('../images/house.png', new BMap.Size(16, 16), { anchor: new BMap.Size(8, 16) });
        var issopt = "";
        $(function () {
            InitTree();
            InitMap();
        });
        function InitMap() {
            map = new BMap.Map("mymap");          // 创建地图实例 
            map.addControl(new BMap.MapTypeControl());   //添加地图类型控件            
            map.centerAndZoom("济南", 11);
            map.enableScrollWheelZoom(true);
            var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
            var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
            map.addControl(top_left_control);
            map.addControl(top_left_navigation);
            $("#myinterval").change(function () {
                changeset();
            });
        }
        function InitMapmark() {
            if (issopt != "1") {
                jQuery.getJSON('GetGPS.ashx?action=road&pid=' + pid + '&pcid=' + pcid + '&mid=' + mid + '&r=' + Math.floor(Math.random() * (1000 + 1)), null, function (data) {

                    if (data != null) {
                        var n = data.total
                        if (n > 0) {
                            map.clearOverlays();
                            pth = new BMap.Point(data.rows[0].mjd, data.rows[0].mwd);
                            ptc = new BMap.Point(data.rows[n - 1].mjd, data.rows[n - 1].mwd);

                            var points = [];
                            var polyline = new BMap.Polyline();
                            $.each(data.rows, function (k, v) {
                                pn = new BMap.Point(v["mjd"], v["mwd"]);
                                points.push(pn);
                            });
                            polyline.setPath(points);   //设置折线的点数组
                            polyline.setStrokeColor("red");
                            polyline.setStrokeOpacity(0.5);
                            polyline.setStrokeWeight(2);
                            polyline.setStrokeStyle("dashed");//solid
                            map.addOverlay(polyline);   //将折线添加到地图上                        
                            marker = new BMap.Marker(pth, { icon: home });
                            map.addOverlay(marker);
                            marker = new BMap.Marker(ptc, { icon: car });
                            map.addOverlay(marker);
                            map.centerAndZoom(ptc, 15);
                            addClickHandler("", marker);
                        }
                    }
                });

            }
        }
        function addClickHandler(did, marker) {
            marker.addEventListener("click", function (e) {
                showawsinfectInfo(did);
            }
            );
        }
        function InitTree() {
            $('#pt').tree({
                width: '100%', //宽度 
                lines: true,                  
                url: 'GetGPS.ashx', //请求数据的页面 
                method: 'post',
                queryParams: { "action": "queryt" },
                formatter: function (node) {
                    var t = "";
                    if (node.id != "")
                        t +="项目号:"+node.id;
                    if (node.text!= "")
                        t +="订单号："+ node.text;
                    if (node.mid!=""&&node.mid != "0")
                        t +="物料号："+ node.mid;
                    return t;
                },                
                onClick: function (node) {
                    if (node != null) {
                        pid = node.id;
                        pcid = node.text;
                        if (node.mid != "0")
                            mid = node.mid;
                        else
                            mid = "";
                        InitMapmark();
                        changeset();
                    }
                },
                onLoadSuccess: function (node, param) {

                }
            });            
        }
        function showawsinfectInfo(id) {            
            top.addTab(pid + "_" + pcid + "_" + mid, '/gpsinfo/listmaterial.aspx?pid=' + pid + '&pcid=' + pcid + '&mid=' + mid);
        }
        function changeset()
        {
            var val = $("#myinterval").val();
            if (val != "-1") {
                issopt = "0";
                timeid = setInterval(InitMapmark, val);
            }
            else {
                issopt = "1";
                clearInterval(timeid);
            }
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="easyui-layout" style="width: 100%; height: 100%;" id="mycon">
        <div region="west" split="true" style="width: 300px; overflow: auto" id="west">
            <ul id="pt">
            </ul>

        </div>
        <div region="center" style="background: #eee; overflow: auto">
            <div style="position: relative; width: 100%; height: 100%;">
                <div id="mymap"></div>
                <div id="Maptype" style="height: 87px; width: 130px; position: absolute; float: left; margin-left: 80px; top:70px; z-index: 99; color: Black; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;">
                    <select id="myinterval" onchange="changeset">
                        <option value="10000">10秒</option>
                        <option value="30000">30秒</option>
                        <option value="60000">1分钟</option>
                        <option value="300000">5分钟</option>
                        <option value="-1">停止</option>

                    </select>
                    <label style="height: 20px; width: 100px; text-align: left; font-size: 13px; font-family: 宋体; font-weight: bold; margin-top: 3px; cursor: pointer;">
                        刷新间隔</label>
                </div>
            </div>
        </div>
    </div>
    <form id="fm" method="post">
        <input type="hidden" id="pid" name="pid" />
        <input type="hidden" id="purchaseid" name="purchaseid" />
        <input type="hidden" id="mid" name="mid" />
    </form>
</asp:Content>
